<script setup lang="ts">
import {useRouter} from 'vue-router'
import {showDialog} from 'vant';
import {usePost} from "@/utils/request";

const router = useRouter()

const showAbout = () => {
  showDialog({
    title: '关于我们',
    message: `Jvyou 驾校预约平台是为了帮助学员在驾校预约课时，提升驾龄，提升驾考成绩而开发的免费平台，帮助学员提升驾龄，提升驾考成绩。`,
  });
}
</script>

<template>
  <VanSpace direction="vertical" class="personal-content" size="1rem">

    <div class="personal-content-header">
      <div class="personal-content-header-avatar">
        <van-image src="/api/images/avatar.jpg"/>
      </div>
      <div class="personal-content-header-info">
        <h1 class="name">
          Jvyou
          <VanTag type="primary">学员</VanTag>
        </h1>
        <p class="intro">宝剑锋从磨砺出。</p>
      </div>
      <div class="personal-content-header-action">
        <van-button icon="edit" size="small" @click="router.push('/personal/edit')">编辑资料</van-button>
      </div>
    </div>

    <van-cell-group>
      <van-cell title="我的教练" is-link label="查看我的教练" icon="manager" to="/personal/coach?path=/personal"/>
      <van-cell title="我的课时" is-link label="查看预约的课时" icon="clock"/>
      <van-cell title="常见问题" is-link label="一些常见问题" icon="question" to="/common/problem"/>
      <van-cell title="关于我们" is-link label="关于我们" icon="info" @click="showAbout"/>
      <van-cell title="修改密码" is-link label="修改密码" icon="records" @click="showAbout"/>
      <van-cell title="退出登录" is-link label="退出登录" icon="clear"/>
    </van-cell-group>

  </VanSpace>
</template>

<style scoped lang="less">
.personal-content {
  width: 100vw;
  height: 100%;

  &-header {
    display: flex;
    align-items: center;
    background-color: var(--jvyou-school-card-background-color);
    border-radius: 10px;
    padding: 4vh 4vw;
    font-size: 14px;
    line-height: 14px;

    &-avatar {
      width: 24vw;
      height: 24vw;
      overflow: hidden;
      border-radius: 50%;
    }

    &-info {
      margin-left: 4vw;

      .name {
        font-size: 1.8em;
        line-height: 1.8em;
        margin-bottom: 2vh;
      }

      .intro {
        font-size: 1em;
        color: #999;
        line-height: 1.2em;
      }
    }

    &-action {
      margin-left: auto;
    }
  }

}
</style>
